<template>
  <div>
    <el-select
      multiple
      collapse-tags
      :value="value"
      @change="change"
      value-key="id"
      style="width: 88%"
      :placeholder="placeholder"
    >
      <el-option
        v-for="item in dataList"
        :key="item[props.value]"
        :value="item[props.value]"
        :label="item[props.label]"
      >
      </el-option>
    </el-select>
    <el-checkbox
      :value="checked"
      @change="setCheckbox"
      style="margin-left: 5px"
    ></el-checkbox>
  </div>
</template>

<script>
export default {
  props: {
    props: {
      type: Object,
      default: () => ({
        label: "label",
        value: "value",
      }),
    },
    placeholder: {
      type: String,
      default: () => "请选择",
    },
    value: {
      type: Array | undefined | null,
      default: () => [],
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    value(arr) {
      let val = arr || [];
      // let sta = true;
      // this.dataList.forEach((item) => {
      //   if (val.indexOf(item[this.props.value]) === -1) {
      //     sta = false;
      //   }
      // });
      // let sta = this.dataList.every(item => val.indexOf(item[this.props.value]) !== -1);
      this.checked = this.dataList.every(item => val.indexOf(item[this.props.value]) !== -1);
    },
  },
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    change(e) {
      this.$emit("input", e);
      this.$emit("change", e);
    },
    setCheckbox(e) {
      let data = e ? this.dataList.map((e) => e[this.props.value]) : [];
      this.$emit("input", data);
      this.$emit("change", data);
    },
  },
};
</script>

<style>
</style>
